<template>
    <div class="app">
        <el-container>
            <el-header>
                <div class="report_header" ref="headerHeight" style="display: flex;justify-content: space-between;">
                    <div style="display: flex;height:100%;align-items: center;">
                        <div class="report_header_left"></div>
                        <div class="report_header_date">
                            <queryDate @queryDateClick='queryDateClick' :endDate="endDate" :beginDate="beginDate"></queryDate>
                        </div>
                        <div class="report_header_query">
                            <queryMember @queryMemberClick="queryMemberClick" :membername='membername'></queryMember>
                        </div>
                        <div class="report_header_query">
                            <queryProduct @queryProductClick='queryProductClick'></queryProduct>
                        </div>
                    </div>
                    <div style="display: flex">
                        <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="loadOrder">查询</el-button>
                        <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />
                    </div>
                </div>
            </el-header>
            <el-main>
                <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;">
                    <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
                        <template slot-scope="scope">{{ scope.$index == tableData.length-1?'总计':scope.$index +1}}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" header-align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" header-align="center" width="85" label="货号">
                        <template slot-scope="scope">
                            <span>{{scope.row.sn}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mobile" width="120" align="center" header-align="center" label="规格">
                        <template slot-scope="scope">
                            <span>{{scope.row.spec}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" prop="buyQry" label="购买张数" header-align="center" width="120">
                    </el-table-column>
                    <el-table-column align="right" prop="buyAmt" label="购买金额" header-align="center" width="120">
                    </el-table-column>
                    <el-table-column align="right" prop="movQry" label="转增数量" header-align="center" width="120">
                    </el-table-column>
                    <el-table-column align="right" prop="useQry" label="使用数量" header-align="center" width="120">
                    </el-table-column>
                    <el-table-column align="right" prop="canQry" label="作废数量" header-align="center" width="120">
                    </el-table-column>
                    <!-- <el-table-column prop="address" label="地址" header-align="center" :show-overflow-tooltip="true" max-width="250">
                    </el-table-column>
                    <el-table-column align="right" prop="pledgeQry" label="押桶数量" header-align="center" width="80">
                    </el-table-column>
                    <el-table-column align="right" prop="pledgeAmt" label="押桶金额" header-align="center" width="120">
                    </el-table-column>
                    <el-table-column align="right" prop="returnQry" width="80" header-align="center" label="退桶数">
                    </el-table-column>
                    <el-table-column align="right" prop="returnAmt" width="80" header-align="center" label="退桶金额">
                    </el-table-column>
                    <el-table-column align="right" prop="balQry" width="80" header-align="center" label="剩余数量">
                    </el-table-column>
                    <el-table-column align="center" prop="balAmt" header-align="center" label="剩余押金" width="120">
                    </el-table-column> -->
                </el-table>
            </el-main>
            <el-footer>
                <div class="report_footer_box">
                    <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import Pagination from "@/components/Pagination";
import ExportList2Excel from "@/components/ExportList2Excel";
import {
    waterTicketReportproductList,
    WaterTicketReportsummaryProduct,
} from "@/api/report";
import utils from "@/utils/utils";
import permission from "@/directive/permission";
//条件组件
import queryDate from "@/components/Query/queryDate";
import queryEmployee from "@/components/Query/queryEmployee";
import queryShop from "@/components/Query/queryShop";
import queryOffice from "@/components/Query/queryOffice";
import queryProduct from "@/components/Query/queryProduct";
import queryMember from "@/components/Query/queryMember";
import queryProductCategory from "@/components/Query/queryProductCategory";
import { dateList, summary } from "@/api/receiveReport";
export default {
    name: "virtualPledgeReport-list",
    data() {
        return {
            //  options: [{
            //   id: 0,
            //   name: '按客户分组统计'
            // }, {
            //   id: 1,
            //   name: '按商品分组统计'
            // }],
            membername: "",
            endDate: "",
            beginDate: "",
            type: 0,
            typeName: "按客户分组统计",
            printing: 10000,
            query: {
                shopId: "",
                productCategoryId: "",
                officeId: "",
                employeeId: "",
                endDate: "",
                beginDate: "",
                productId: "",
                memberId: "",
            },
            tableData: [],
            curHeight: null,
            pageSize: 20,
            total: 0,
            pageNum: 1,
            summaryForm: {
                quantity: 0,
                discount: 0,
                totalCost: 0,
                maoli: 0,
                maolilv: 0,
                totalAmt: 0,
            },
            headerType: false,
        };
    },
    directives: {
        elDragDialog,
    },
    created() {
        var _this = this;
        // _this.summaryClick()
        this.query.memberId = this.$route.query.memberId;
        this.membername = this.$route.query.membername;
        (this.beginDate = this.$route.query.beginDate),
            (this.endDate = this.$route.query.endDate),
            this.loadOrder();
    },

    components: {
        Pagination,
        queryDate,
        queryShop,
        queryOffice,
        queryProduct,
        queryMember,
        queryProductCategory,
        queryEmployee,
        ExportList2Excel,
    },
    mounted() {
        this.comeIn();
        this.beforeMount();
    },
    methods: {
        queryEmployeeClick(data) {
            this.query.employeeId = data.employeeId;
        },
        //下载模板的函数
        handleExport() {
            let _this = this;
            var loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            //要导出函数携带的参数
            //要导出函数携带的参数
            let data = {};
            data.tHeader = [
                "商品名称",
                "货号",
                "规格",
                "购买张数",
                "购买金额",
                "转增数量",
                "使用数量",
                "作废数量",
            ];
            data.filterVal = [
                "name",
                "sn",
                "spec",
                "buyQry",
                "buyAmt",
                "movQry",
                "useQry",
                "canQry",

                
            ];
            data.filename = "客户水票明细列表";
            const params = new URLSearchParams();
            params.append("pageNum", this.pageNum);
            params.append("pageSize", this.pageSize);
            params.append("startDate", this.query.beginDate);
            params.append("endDate", this.query.endDate);
            params.append("employeeId", this.query.employeeId);
            params.append("shopId", this.query.shopId);
            params.append("memberId", this.query.memberId);
            params.append("productId", this.query.productId);
            waterTicketReportproductList(params)
                .then((res) => {
                    data.list = res.data.data;
                    WaterTicketReportsummaryProduct(params).then((response) => {
                        response.data[0].name = "合计";
                        data.list.push(response.data[0]);
                        _this.$refs.exportList2Excel.handleDownload(data);
                        loading.close();
                    });
                    if (data.list.length == this.printing) {
                        this.pageNum++;
                        console.log(this.pageNum);
                        this.handleExport();
                    } else {
                        return;
                    }
                })
                .catch((error) => {
                    _this.$refs.exportList2Excel.unlockLoading();
                    loading.close();
                    console.log("error!!");
                });
            _this.$refs.exportList2Excel.handleDownload(data);
        },
        queryDateClick(data) {
            this.query.beginDate = data.beginDate;
            this.query.endDate = data.endDate;
        },
        queryShopClick(data) {
            console.log(data);
            this.query.shopId = data.shopId;
        },
        queryOfficeClick(data) {
            this.query.officeId = data.officeId;
        },
        queryProductClick(data) {
            this.query.productId = data.productId;
        },
        queryMemberClick(data) {
            this.query.memberId = data.memberId;
        },
        queryProductCategoryClick(data) {
            this.query.productCategoryId = data.productCategoryId;
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    var h =
                        document.documentElement.clientHeight ||
                        document.body.clientHeight;
                    var headerHeight = _this.$refs.headerHeight.clientHeight;
                    _this.curHeight = h - 174 - headerHeight; //减去页面上固定高度height
                })();
            };
        },
        comeIn() {
            console.log("222");
            var _this = this;
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            var headerHeight = _this.$refs.headerHeight.clientHeight;
            this.curHeight = h - 174 - headerHeight; //减去页面上固定高度height
        },
        loadOrder() {
            var _this = this;
            console.log(this.type);
            console.log(this.query);
            const params = new URLSearchParams();
            params.append("pageNum", this.pageNum);
            params.append("pageSize", this.pageSize);
            params.append("startDate", this.query.beginDate);
            params.append("endDate", this.query.endDate);
            // params.append("employeeId", this.query.employeeId);
            // params.append("shopId", this.query.shopId);
            params.append("memberId", this.query.memberId);
            params.append("productId", this.query.productId);
            waterTicketReportproductList(params).then((response) => {
                _this.tableData = response.data.data;
                _this.total = response.data.total;
                _this.summaryClick();
            });
        },
        summaryClick() {
            console.log(this.query);
            var _this = this;
            const params = new URLSearchParams();
            params.append("startDate", this.query.beginDate);
            params.append("endDate", this.query.endDate);
            params.append("shopId", this.query.shopId);
            params.append("employeeId", this.query.employeeId);
            params.append("memberId", this.query.memberId);
            params.append("productId", this.query.productId);
            WaterTicketReportsummaryProduct(params)
                .then((response) => {
                    if (response.data[0] != null && response.data.length > 0) {
                        _this.tableData.push(response.data[0]);
                    }
                })
                .catch((error) => {});
        },
        totalLine({ row, column, rowIndex, columnIndex }) {
            var _this = this;
            if (rowIndex === _this.tableData.length - 1) {
                if (columnIndex === 0) {
                    return {
                        rowspan: 1,
                        colspan: 4,
                    };
                } else if (
                    columnIndex === 1 ||
                    columnIndex === 2 ||
                    columnIndex === 3
                ) {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },
        chooseClick() {
            this.headerType = !this.headerType;
            this.comeIn();
        },
    },
};
</script>

<style scoped>
.app {
    background-color: rgba(248, 248, 248, 0.8);
}
/deep/.el-header {
    padding: 10px;
    height: 100% !important;
    padding-bottom: 0;
}
.primary {
    margin-left: 10px;
}
.report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;

    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 10px;
}

.report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409eff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.report_header_query {
    margin-left: 10px;
    width: 130px;
    margin-top: 5px;
}
/deep/.el-button {
    height: 35px;
}
.report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 260px;
    margin-top: 5px;
}

.report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
}

/deep/.el-footer {
    padding: 10px;
    padding-top: 0;
}

.report_footer_box_title {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
}

.elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px;
}

/deep/.el-table--group::after,
.el-table--border::after,
.el-table::before {
    background-color: white;
}

/deep/.el-table__body tbody .el-table__row:last-child {
    background-color: #f5f7fa;
}

/deep/.el-main {
    padding: 10px;
    padding-bottom: 0;
}

/deep/.el-table--enable-row-transition .el-table__body td {
    border-bottom: none;
}

/deep/.el-table::before {
    height: 0px;
}

/deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1);
}

/deep/.pagination-container {
    margin-top: 0 !important;
}
.details_Title {
    font-size: 14px;
    color: #409eff;
}
.justify_right {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
